<template>
    <div>
          <el-form :model="editForm" label-position="right" :rules="addFormRules" ref="editFormRef" label-width="80px">
            <el-row>
              <el-col :span="10">
                <div class="grid-content bg-purple">
                  <el-form-item label="用户名" prop="username">
                    <el-input v-model="editForm.username" :disabled="true"></el-input>
                    <el-input
                            type="hidden"
                            v-model="editForm.id"
                            :disabled="true"
                            style="display:none;"
                    ></el-input>
                  </el-form-item>
                </div>
              </el-col>
                <el-col :span="10">
                    <el-form-item label="联系方式" prop="phoneNumber">
                    <el-input v-model="editForm.phoneNumber"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
              <el-col :span="10">
                <div class="grid-content bg-purple">
                  <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="editForm.nickname"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple-light">
                  <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="editForm.sex">
                      <el-radio :label="0">男</el-radio>
                      <el-radio :label="1">女</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          </el-form>
        <el-row style="text-align: center;">
          <el-button type="primary" @click="update()">确 定</el-button>
          <el-button @click="closed()">取 消</el-button>
        </el-row>
    </div>
</template>
<script>
import userApi from "@/api/user"
import store from "@/store"
import { Message } from 'element-ui'
export default {
    data () {
        return {
            addFormRules: {//添加表单验证规则
                username: [
                    { required: true, message: "请输入用户名", trigger: "blur" },
                    { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
                ],
                sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
                phoneNumber: [
                    {
                        required: true,
                        message: "请输入联系方式",
                        //validator: checkPhone,
                        trigger: "blur"
                    }
                ],
                nickname: [
                    { required: true, message: "请输入昵称", trigger: "blur" },
                    { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
                ]
            }, 
        }
    },
    props:{
      id:'',
      editForm: {}
    },
    created(){
    },
    methods:{
        closed(){
           this.$emit('closeDialog')
        },
        update(){
            userApi.update(this.editForm).then(res =>{
                Message.success(res.message)
                this.$emit('getUserList')
                this.closed()

            })
        }

    }
    
}
</script>
<style lang="stylus" scoped>

</style>